<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>index页面</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
</style>
</head>
<body>
	<div class="container">
		<header>
			<h1>index页面</h1>
		</header>
		<main>
			<form id="form" action="http://192.168.31.131/submit.php" 
			method="POST" enctype="multipart/form-data" >
			<fieldset>
				First name:<input type="text" name="fname"><br>
				Last name: <input type="text" name="lname" autocomplete="off"><br>
				E-mail: <input type="email" name="email" autocomplete="off"><br>
			</fieldset>
			<fieldset>
				<legend>测试</legend>
				<input  name="name" type="text" pattern="[a-zA-Z]{5,20}" 
				autocomplete="off"  id="inp1" value=""
				oninvalid="validate('请输入5~20位字母的用户名')">
			</fieldset>
			<fieldset>
				<legend>课程</legend>
				<select name="lesson[]" multiple size="10">
					<optgroup label="后台">
						<option value="php">PHP</option>
						<option value="linux">LINUX</option>
						<option value="mysql">MYSQL</option>
					</optgroup>
					<optgroup label="前台">
						<option value="html">HTML</option>
						<option selected="selected" value="js">JAVASCRIPT</option>
						<option value="css">CSS</option>
					</optgroup>
				</select>
			</fieldset>
			<fieldset>
				<legend>性别</legend>
				<input type="radio" name="sex" value="boy" id="boy">
				<label for="boy">男</label>
				<input type="radio" name="sex" value="girl" id="girl" checked>
				<label for="girl">女</label>
			</fieldset>
			<fieldset>
				<legend>复选框</legend>
				<input type="checkbox" name="checkbox[]" value="php" id="php">
				<label for="php">PHP Language</label>
				<input type="checkbox" name="checkbox[]" 
				value="mysql" id="mysql" checked>
				<label for="mysql">MYSQL数据库</label>
			</fieldset>
			<fieldset>
				<legend>文件上传</legend>
				<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">
			</fieldset>
			<fieldset>
				<legend>文件上传</legend>
				<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">
			</fieldset>
			<fieldset>
				<legend>日期时间</legend>
				<input name="date" type="date" step="5" min="2020-09-22" max="2025-01-15" >
				<input name="week"  type="week">
				<input name="month"  type="month">
				<input name="time" type="time" >
				<input name="datetime" type="datetime" >
				<input type="datetime-local" name="datetime-local">
			</fieldset>

			<fieldset>
				<legend>选择课程</legend>
				<input type="text" name="lesson" list="lesson" placeholder="请选择课程"> 
				<datalist id="lesson">
					<option value="PHP"/>
					<option value="CSS"/>
					<option value="MYSQL"/>
				</datalist>
			</fieldset>


			<button  id="bt2">提交表单</button>
		</form>
	</main>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
<script src="index.js"></script>
<script type="text/javascript">
	function validate(message) {
		alert(message);
	}
	console.log($('[name=name]').attr('autocomplete'), inp1.autocomplete)
	console.log($('form').attr('enctype'), form.enctype)
</script>
</body>
</html>